<template>
    <div class="home">
        <header class="home-header">
            <div class="user">
                <div class="user__info">
                    <div class="user__left">
                        <img src="~@/assets/images/weijuchiluntu.jpg" alt="">
                    </div>
                    <div class="user__right">
                        <h4>Sawyer admin
                            <i-button class="free-button" type="warning" size="small">免费版</i-button>
                            <i-button class="free-button" type="success" size="small">升级</i-button>
                        </h4>
                    </div>
                </div>
                <div class="user__count">
                    <i-row class="row">
                        <i-col span="4" class="col-price">
                            <label>今日交易额</label>
                            <h2 class="">1980.56 <i-icon class="icon-eye" color="#9ea7b4" size="22" type="eye"></i-icon></h2>
                        </i-col>
                        <i-col span="4">
                            <label>今日订单数</label>
                            <h2>118</h2>
                        </i-col>
                        <i-col span="4">
                            <label>待付款订单</label>
                            <h2>126</h2>
                        </i-col>
                        <i-col span="4">
                            <label>待发货订单</label>
                            <h2>39</h2>
                        </i-col>
                        <i-col span="4">
                            <label>维权中订单</label>
                            <h2>137</h2>
                        </i-col>
                        <i-col span="4">
                            <i-button type="info" icon="plus" size="large">添加商品</i-button>
                        </i-col>
                    </i-row>
                </div>
                <div class="user__shortcut">
                    <i-tooltip class="tool-tip" content="店铺访问" placement="bottom-end">
                        <span>
                            <i class="iconfont icon-store"></i>
                        </span>
                    </i-tooltip>
                    <i-tooltip class="tool-tip" content="店铺装修" placement="bottom-end">
                        <span>
                            <i class="iconfont icon-decoration"></i>
                        </span>
                    </i-tooltip>
                </div>
            </div>
        </header>
        <div class="home-middle">
            <div class="home-middle__left">
                <section class="summary-graph">
                    <i-card :padding="0">
                        <line-chart :option="orderTrend"></line-chart>
                    </i-card>
                </section>
                <section class="common-function">
                    <i-card>
                        <p slot="title">
                            常用功能
                        </p>
                        <i-row class="custom-row">
                            <i-col class="custom-col" span="6">
                                <div class="custom-col__con">
                                    <div class="icon-con icon-con1">
                                        <i-icon type="briefcase"></i-icon>
                                    </div>
                                    <h4>发布商品</h4>
                                </div>
                            </i-col>
                            <i-col class="custom-col" span="6">
                                <div class="custom-col__con">
                                    <div class="icon-con icon-con2">
                                        <i-icon type="ios-bookmarks"></i-icon>
                                    </div>
                                    <h4>页面管理</h4>
                                </div>
                            </i-col>
                            <i-col class="custom-col" span="6">
                                <div class="custom-col__con">
                                    <div class="icon-con icon-con3">
                                        <i class="iconfont icon-kefu"></i>
                                    </div>
                                    <h4>客服系统</h4>
                                </div>
                            </i-col>
                            <i-col class="custom-col" span="6">
                                <div class="custom-col__con">
                                    <div class="icon-con icon-con4">
                                        <i class="iconfont icon-youhuiquan"></i>
                                    </div>
                                    <h4>优惠券</h4>
                                </div>
                            </i-col>
                        </i-row>
                        <i-row class="custom-row">
                            <i-col class="custom-col" span="6">
                                <div class="custom-col__con">
                                    <div class="icon-con icon-con5">
                                        <i class="iconfont icon-xiaochengxu"></i>
                                    </div>
                                    <h4>微信小程序</h4>
                                </div>
                            </i-col>
                            <i-col class="custom-col" span="6">
                                <div class="custom-col__con">
                                    <div class="icon-con icon-con6">
                                        <i class="iconfont icon-tixian"></i>
                                    </div>
                                    <h4>收入/提现</h4>
                                </div>
                            </i-col>
                            <i-col class="custom-col" span="6">
                                <div class="custom-col__con">
                                    <div class="icon-con icon-con7">
                                        <i class="iconfont icon-pinpai"></i>
                                    </div>
                                    <h4>品牌管理</h4>
                                </div>
                            </i-col>
                            <i-col class="custom-col" span="6">
                                <div class="custom-col__con">
                                    <div class="icon-con icon-con8">
                                        <i class="iconfont icon-bangzhu"></i>
                                    </div>
                                    <h4>帮助中心</h4>
                                </div>
                            </i-col>
                        </i-row>
                    </i-card>
                </section>
            </div>
            <div class="home-middle__right">
                <i-card :padding="0">
                   <service></service>
                </i-card>
                <section class="help-doc">
                     <i-card :padding="16">
                         <p slot="title">帮助文档</p>
                         <ul>
                             <li>我是新闻新闻1</li>
                             <li>我是新闻新闻2</li>
                             <li>我是新闻新闻3</li>
                             <li>我是新闻新闻4</li>
                             <li>我是新闻新闻5</li>
                             <li>我是新闻新闻6</li>
                             <li>我是新闻新闻7</li>
                         </ul> 
                     </i-card>
                </section>
            </div>
        </div>
        <div class="system-info">
            <i-card>
                <p slot="title">系统信息</p>
                <i-row class="system-info__row">
                    <i-col class="system-info__col" span="4">服务器操作系统:</i-col>
                    <i-col class="system-info__col" span="8"><strong>Darwin (::1)</strong></i-col>
                    <i-col class="system-info__col" span="4">Web 服务器:</i-col>
                    <i-col class="system-info__col" span="8"><strong>Apache/2.2.31 (Unix) mod_wsgi/3.5 Python/2.7.13 PHP/5.6.30 mod_ssl/2.2.31 OpenSSL/1.0.2j DAV/2 mod_fastcgi/2.4.6 mod_perl/2.0.9 Perl/v5.24.0</strong></i-col>
                </i-row>
                <i-row class="system-info__row">
                    <i-col class="system-info__col" span="4">PHP 版本:</i-col>
                    <i-col class="system-info__col" span="8"><strong>5.6.30</strong></i-col>
                    <i-col class="system-info__col" span="4">MySQL 版本:</i-col>
                    <i-col class="system-info__col" span="8"><strong>5.6.35</strong></i-col>
                </i-row>
                <i-row class="system-info__row">
                    <i-col class="system-info__col" span="4">安全模式:</i-col>
                    <i-col class="system-info__col" span="8"><strong>否</strong></i-col>
                    <i-col class="system-info__col" span="4">安全模式GID:</i-col>
                    <i-col class="system-info__col" span="8"><strong>否</strong></i-col>
                </i-row>
            </i-card>
        </div>
    </div>
</template>

<script>
// custom compontend
import LineChart from '@/admin/components/echarts/LineChart'
import Service from '@/admin/components/Service'

export default {
    name: 'home',
    data() {
        return {
            orderTrend: {
                title: {
                    text: '订单趋势'
                },
                legend: {
                    data: ['订单数量', '待付款订单', '待发货订单', '维权中订单']
                },
                xAxis: {
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                series: [
                    {
                        type: 'line',
                        areaStyle: { normal: { opacity: '0.06' } },
                        name: '订单数量',
                        data: [10, 132, 40, 380, 196, 230, 210]
                    },
                    {
                        type: 'line',
                        areaStyle: { normal: { opacity: '0.06' } },
                        name: '待付款订单',
                        data: [30, 50, 60, 30, 10, 18, 8]
                    },
                    {
                        type: 'line',
                        areaStyle: { normal: { opacity: '0.06' } },
                        name: '待发货订单',
                        data: [60, 70, 53, 34, 19, 32, 3]
                    },
                    {
                        type: 'line',
                        areaStyle: { normal: { opacity: '0.06' } },
                        name: '维权中订单',
                        data: [6, 12, 20, 1, 0, 9, 8]
                    }
                ]
            }
        }
    },
    components: {
        LineChart,
        Service
    },
    mounted() {}
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/theme/index';
@user-shortcut-span-width: 30px; // 右上角小图标宽高
@user-height: 100px; // 用户信息背景高度
@user-margin-left: 100px; // 用户信息距离左侧距离
@avatar-width: 130px; // 用户头像的宽高
@user-info-left: 18px; // 用户信息距离左侧图片的距离

header.home-header {
    position: relative;
    height: @user-height;
    background: url('~@/assets/images/home_bg.jpg') -100px -340px no-repeat;
    .user__info {
        position: absolute;
        z-index: 1;
        left: @user-margin-left;
        bottom: -76px;
        display: flex;
    }
    .user__left {
        img {
            width: @avatar-width;
            height: @avatar-width;
            display: block;
            border-radius: 9999px;
            border: 3px solid rgba(255, 255, 255, 0.9);
        }
    }
    .user__right {
        flex: 1;
        margin-top: 6px;
        margin-left: @user-info-left;
        position: relative;
        h4 {
            font-size: 24px;
            font-weight: normal;
            color: #fff;
        }
        .free-button {
            margin-left: 4px;
        }
    }
    .user__count {
        position: absolute;
        top: @user-height;
        left: 0;
        right: 0;
        padding: 20px 0;
        background: #fff;
        border-bottom: 1px solid @border-color-base;
        border-color: #f2f4f9;
        .row {
            margin-left: @user-margin-left + @avatar-width + @user-info-left;
            position: relative;
            label {
                color: @subsidiary-color;
                font-size: 13px;
            }
            h2 {
                font-size: 24px;
            }
            .icon-eye {
                font-size: 20px;
                color: @subsidiary-color;
            }
        }
    }
    .user__shortcut {
        position: absolute;
        right: @gap;
        top: @gap;
        .tool-tip {
            margin-right: 6px;
        }
        span {
            display: inline-block;
            background: rgba(0, 0, 0, 0.4);
            width: @user-shortcut-span-width;
            height: @user-shortcut-span-width;
            line-height: @user-shortcut-span-width;
            text-align: center;
            border-radius: 9999px;
        }
        span:last-of-type {
            margin-right: 0;
        }
        span:hover {
            cursor: pointer;
            background: @primary-color;
        }
        .iconfont {
            color: #fff;
            font-size: 14px;
        }
    }
}
.home-middle {
    padding: @gap;
    margin-top: 95px;
    display: flex;
}

.home-middle__left {
    flex: 1;
}

.home-middle__right {
    right: @gap;
    margin-left: @gap;
    width: 246px;
    .recommend {
        border-radius: @radius;
        overflow: hidden;
        img {
            display: block;
            width: 100%;
            height: auto;
        }
    }
}

.summary-graph {
    background: #fff;
    border-radius: @radius;
    h3 {
        padding: 14px;
        display: block;
        font-size: 18px;
    }
}
.common-function {
    margin-top: @gap;
    vertical-align: middle;
    .custom-row {
        padding: 7px 0;
    }
    .custom-col {
        padding: 0 10px;
    }
    .custom-col__con {
        background: @table-thead-bg;
        padding: 10px 12px;
        display: flex;
        align-items: center;
    }
    .icon-youhuiquan {
        font-size: 14px;
    }
    .icon-con {
        background: #35b2eb;
        width: 28px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        font-size: 16px;
        color: #fff;
        border-radius: 9999px;
        display: inline-block;
    }
    .icon-con2 {
        background: #ea6387;
    }
    .icon-con3 {
        background: #2db7b9;
    }
    .icon-con4 {
        background: #c258d5;
    }
    .icon-con5 {
        background: #41c177;
    }
    .icon-con6 {
        background: #ffb03a;
    }
    .icon-con7 {
        background: #4579ef;
    }
    .icon-con8 {
        background: #38c7de;
    }
    h4 {
        display: inline-block;
        font-weight: normal;
        margin-left: 8px;
        font-size: 13px;
    }
}

.help-doc {
    margin-top: @gap;
    ul li {
        padding: 10px 0;
        &:first-child {
            padding-top: 0;
        }
        &:last-child {
            padding-bottom: 0;
        }
    }
}
.system-info {
    padding: 0 @gap;
    &__col {
        padding: @gap;
    }
}
</style>